﻿﻿@{
    var status = Context.Request.Query["status"];
    var pending = "text-primary";
    var inprocess = "text-primary";
    var completed = "text-primary";
    var approved = "text-primary";
    var all = "text-primary";

    switch (status)
    {
        case "pending":
            pending = "active text-white bg-primary";
            break;
        case "inprocess":
            inprocess = "active text-white bg-primary";
            break;
        case "completed":
            completed = "active text-white bg-primary";
            break;
        case "approved":
            approved = "active text-white bg-primary";
            break;
        default:
            all = "active text-white bg-primary";
            break;
    }
}


<div class="card shadow border-0 my-4">
    <div class="card-header bg-secondary bg-gradient ml-0 py-3">
        <div class="row">
            <div class="col-12 text-center">
                <h2 class="text-white py-2">Order List</h2>
            </div>
        </div>
    </div>
    <div class="card-body p-4">
        <div class="d-flex justify-content-between pb-5 pt-2">
            <span></span>
            <ul class="list-group list-group-horizontal-sm">
                <a style="text-decoration:none;" asp-controller="Order" asp-action="Index" asp-route-status="inprocess">
                <li class="list-group-item @inprocess">In Process</li>
                </a>
                <a style="text-decoration:none;" asp-controller="Order" asp-action="Index" asp-route-status="pending">
                <li class="list-group-item @pending">Payment Pending</li>
                </a>
                <a style="text-decoration:none;" asp-controller="Order" asp-action="Index" asp-route-status="completed">
                <li class="list-group-item @completed">Completed</li>
                </a>
                <a style="text-decoration:none;" asp-controller="Order" asp-action="Index" asp-route-status="approved">
                <li class="list-group-item @approved">Approved</li>
                </a>
                <a style="text-decoration:none;" asp-controller="Order" asp-action="Index" asp-route-status="all">
                <li class="list-group-item @all">All</li>
                </a>
            </ul>
        </div>
        <table id="tblData" class="table table-bordered table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Phone Number</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Total</th>
                    <th></th>
                </tr>
            </thead>
        </table>

    </div>
</div>

@section Scripts {
    <script src="~/js/order.js"></script>
}